@import './themeConfig.scss';

.small-tag {
    padding: 0 5px;
    width: 40px;
    height: 20px;
    line-height: 18px;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-screen-50 {
    height: calc(100vh - 50px);
}

.appIcon {
    color: var(--ui-text-color);
    text-align: center;
    vertical-align: -.125rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    line-height: 0;
    display: inline-block;
    cursor: pointer;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.justify-start {
    justify-content: flex-start;
}

.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}

.justify-evenly {
    justify-content: space-evenly;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.text-center {
    text-align: center;
}

.gap-1 {
    gap: .25rem;
}

.gap-2 {
    gap: .5rem;
}

.gap-3 {
    gap: .75rem;
}

.ml-auto {
    margin-left: auto;
}

.mx-1 {
    margin-left: .25rem;
    margin-right: .25rem;
}

.mx-2 {
    margin-left: .5rem;
    margin-right: .5rem;
}

.ml-2 {
    margin-left: .5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.pb-2 {
    padding-bottom: .5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 1;
}

.opacity-25 {
    opacity: 0.25;
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem;
}

.pointer-events-none {
    pointer-events: none;
}

.overflow-hidden {
    overflow: hidden;
}

/* 隐藏光标的样式 */
.no-caret {
    caret-color: transparent;
    /* 将光标颜色设置为透明 */
}

.jtyj-primary-color {
    color: var(--ui-variant-btn-color);
}

.jtyj-active-color {
    color: var(--app-nav-primary-active);
}

.hr-color {
    height: 1px;
    background-color: var(--ui-border-color-base);
}

.theme-text-color {
    color: var(--ui-text-color);
}

.schema-node-text-wrapper>input:focus-visible {
    height: 30px;
    padding-left: 1px;
    outline: 1px solid var(--ui-border-color-base);
    border-radius: 8px;
}

// 鼠标滑过下拉菜单的列表样式
.dropdown-menu {
    .menu-item {
        line-height: 24px;
        user-select: none;
        flex: auto;
        color: var(--ui-text-color);
        font-size: 14px;
        padding: 4px 12px;
        border-radius: 6px;
        cursor: pointer;

        &:hover {
            background-color: var(--ui-item-hover-bg);
        }
    }
}

// 树节点的右键菜单样式
.right-menu-box {
    position: fixed;
    display: block;
    z-index: 20000;
    color: var(--ui-text-color);
    border: 1px solid var(--ui-border-color-base);
    background-color: var(--ui-dropdown-menu-bg);
    font-size: 14px;
    border-radius: 8px;
    padding: 8px 0;
}

.breadcrumb-dropdown-menu {
    max-height: 238px;
    overflow-y: auto;

    .tool-item {
        line-height: 24px;
        border-radius: 6px;
        margin: 1px 4px 0;
        padding: 4px 12px;
        font-size: 14px;
        color: var(--ui-text-color);
        cursor: pointer;

        &:hover {
            background-color: var(--ui-item-hover-bg);
        }
    }

    .tool-item-selected {
        background-color: var(--ui-menu-item-active-bg);
    }
}

.dropdown-divider {
    height: 1px;
    margin: 4px 0;
    line-height: 0;
    background-color: var(--ui-border-color-base);
}

.tree-node-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;

    .text {
        width: calc(100% - 60px);
        height: 100%;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;

        .tree-title {
            color: var(--ui-text-color);
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            -webkit-line-clamp: 1;
            font-size: var(--ui-font-size-base);
        }

        .tree-node-count {
            color: var(--ui-breadcrumb-base-color);
            font-size: 14px
        }
    }

    .icon-box {
        width: 60px;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        visibility: hidden;

        .item-icon {
            width: 30px;
            height: 100%;

            &:hover {
                background-color: var(--ui-btn-text-hover-bg);
                border-radius: 6px;
            }
        }
    }

    &:hover {
        .icon-box {
            visibility: visible;
        }
    }
}

.menu-item {
    position: relative;
    height: 30px;
    display: flex;
    cursor: pointer;

    .menu-item-icon {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }

    .menu-item-text {
        height: 30px;
        line-height: 30px;
        color: var(--ui-text-color);
        font-size: 14px;
        padding: 0 5px;
        box-sizing: border-box;
        cursor: pointer;
    }
}

.el-select-dropdown {

    background-color: var(--ui-dropdown-menu-bg);
    border: 1px solid var(--ui-border-color-base);

    & .el-select-dropdown__item {
        color: var(--ui-text-color);
        margin: 2px 5px;
    }

    & .el-select-dropdown__item.selected {
        background-color: var(--app-nav-bg);
    }

    & .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: var(--ui-item-hover-bg);
    }

    &.el-popper[x-placement^=bottom] .popper__arrow::after {
        border-bottom-color: var(--ui-dropdown-menu-bg);
    }

    &.el-popper[x-placement^=bottom] .popper__arrow {
        border-bottom-color: var(--ui-border-color-base);
    }
}

.message-box-style {
    background-color: var(--ui-dropdown-menu-bg);
    border: 1px solid var(--ui-border-color-base);

    .el-message-box__title,
    .el-message-box__content {
        color: var(--ui-text-color);
    }

    .el-message-box__headerbtn .el-message-box__close {
        color: var(--ui-breadcrumb-base-color);

        &:hover {

            .el-icon-close:before {
                color: var(--ui-text-color);
            }
        }
    }

    .el-message-box__btns {

        // 第一个按钮是取消
        .el-button:nth-of-type(1) {
            border-radius: 8px;
            color: var(--ui-text-color);
            background-color: transparent;
            border: 1px solid var(--ui-variant-btn-border-color);

            &:focus,
            &:hover {
                color: var(--ui-text-color);
                background-color: transparent;
                border-color: var(--ui-input-hover-border-color);
            }
        }

        .el-button:nth-of-type(2) {
            border-radius: 8px;
            color: var(--ui-variant-btn-color);
            background-color: var(--app-primary-base);
            border: 1px solid var(--app-primary-base);

            &:focus,
            &:hover {
                color: var(--ui-variant-btn-color);
                background-color: var(--ui-btn-primary-color-hover);
                border-color: var(--ui-btn-primary-color-hover);
            }
        }
    }
}